<template>
  <div class="VideoCard">
    <video v-if="isios" :src="VideoSrc" muted autoplay loop
           height="100%"
           width="100%" ref="video"
           playsinline="true"
           x5-playsinline="true"
           x-webkit-airplay="allow"
           webkit-playsinline="false"
           x5-video-player-type="h5"
           x5-video-player-fullscreen="true"
           x5-video-orientation="portraint">

    </video>
     
    <div class="bgss" ref="bgss" v-show="!isios">

    </div>
    <!--<video id="video" :src="VideoSrc" preload="auto" x-webkit-airplay="allow" x5-video-player-type="h5"  -->
    <!--x5-video-player-fullscreen="true" x5-video-orientation="portraint" width="100%" height="260px"-->
    <!--webkit-playsinline="true" playsinline="true" autoplay="true" controls="true" muted loop>-->
    <!--    Your browser does not support the video tag.-->
    <!--</video>-->
    <div class="content">
      <div class="BookShelf">
        <!--<div class="BookShelf">-->
        <div class="tests">
          <div class="nickname">
            <img :src="items.vip_info.avatar" alt="">
          </div>
          <div class="username"><span>{{items.vip_info.nickname}}</span></div>
          <div class="illst">
            <p class="nums">
              <span>我正参与【20万现金】读书计划，坚持阅读，赚200元现金。累计阅读{{items.vip_info.read_days}}天，每天10分钟，180天读完50本高分好书！</span>
            </p>
          </div>
        </div>

        <div class="qrimg">
          <img :src="qr_code" alt="">
        </div>
        <div class="foot" v-if="false">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        VideoSrc: '',
        imgArr:[],
        isios: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        img: '',
        qr_code: require('./img/@we.png'),
        items: {
          vip_info: {}
        },
        BookShelfParams:sessionStorage.getItem('BookShelfParams')?JSON.parse(sessionStorage.getItem('BookShelfParams')):{},
        publicParams:sessionStorage.getItem('Ten_Vip_share_data') ? JSON.parse(sessionStorage.getItem('Ten_Vip_share_data')).data.qing_data:{}
      }
    },
    mounted: function () {
      var _this = this
      // setTimeout(() => {
      //   _this.$refs.video.play()
      // }, 1000)
      this.ShareCard(this.BookShelfParams)
      this.$wx.getNetworkType(res => {
        _this.$refs.video.play()
      })
    },
    methods: {
      ShareCard: function (data) {
        this.$axios.achievement_card(data).then(res => {
          var _this =  this
          if(res.data.qing_data.test_body){
            this.items = res.data.qing_data
            this.items.vip_info.read_words = this.items.vip_info.read_words >= 1000 ? (this.items.vip_info.read_words / 1000).toFixed(1) + 'K' : this.items.vip_info.read_words + ''
            var arrimg = res.data.qing_data.test_body.attach_body.split(',');
            var mp4reg = /^.+\.mp4$/i;
            arrimg.map((item)=>{
              if(mp4reg.test(item)){
                _this.VideoSrc = item;
              }else{
                _this.imgArr.push(item);
              }
            })
            this.img = _this.imgArr[Math.floor(Math.random()*_this.imgArr.length)];
            this.$refs.bgss.style.background = "url("+this.img+") no-repeat";
            this.$refs.bgss.style.backgroundSize = '100% 100%';
            // this.init()
            // this.canvasinit()
            // res.data.qing_data.next_share_info.share_id = this.$route.query.share_id || data.share_id
            // res.data.qing_data.next_share_info.share_token = this.$route.query.share_token ||data.share_token
            this.Share(this.publicParams)
          }else{
            _this.go('BookShelf',_this.BookShelfParams)
          }

        })
      },
      Share: function (str) {
        var _this = this
        var obj = {}
        var data = {
          title: str.title,
          desc: str.desc,
          link: str.link,
          imgUrl: str.img
        }
        obj.share_id = str.share_id
        obj.share_token = str.share_token
        this.$wx.ShareTimeline(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
        this.$wx.ShareAppMessage(data, res => {
          obj.share_mode = res.share_mode
          obj.share_type = 21
          _this.share_done(obj)
        })
      },
      share_done: function (obj) {
        this.$axios.share_done(obj).then(res => {
          this.shares = false
          if (res.data.qing_code !== 100) {
            Toast({
              message: '打卡失败',
              iconClass: 'iconfont icon-bangdingshibai',
              duration: 5000
            })
          } else {
            Toast({
              message: '分享成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
          }
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
